@textColor1: #bbb;
@textColor2: #fff;
.musicListWrapper {
  position: absolute;
  bottom: 47px;
  left: 50%;
  z-index: 9999;
  width: 986px;
  height: 301px;
  margin-left: -493px;
  background-color: #1f1f1f;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  .listhd {
    display: flex;
    display: flex;
    height: 40px;
    padding: 10px 15px 10px 20px;
    color: @textColor1;
    background-color: #1c1c1c;
    .listhdl {
      display: flex;
      flex: 4;
      justify-content: space-between;
      .count {
        color: @textColor2;
      }
      .delete {
        display: flex;
        align-items: center;
        margin-right: 15px;
        color: @textColor1;
        cursor: pointer;
        opacity: 0.8;
        &:hover {
          opacity: 1;
        }
      }
    }
    .listhdr {
      display: flex;
      flex: 3;
      border-left: 1px solid rgba(187, 187, 187, 0.3);
      .title {
        flex: 1;
        color: @textColor2;
        text-align: center;
        cursor: pointer;
      }
      .close {
        color: @textColor1;
      }
    }
  }
  .listbd {
    display: flex;
    height: calc(100% - 60px);
    color: @textColor1;
    .left {
      flex: 4;
      overflow: hidden;
      .listItemHover {
        background-color: #11100f;
        .musicAuthor,
        .musicTitle {
          color: @textColor2 !important;
        }
      }
      .listItem {
        display: flex;
        justify-content: space-between;
        padding: 5px 10px;
        cursor: pointer;
        &:hover {
          background-color: #11100f;
          .musicAuthor,
          .musicTitle {
            color: @textColor2 !important;
          }
        }
        .listItemRight {
          display: flex;
          .musicTime {
            margin: 0 15px;
          }
          .musicAuthor {
            margin-bottom: unset;
            color: @textColor1;
          }
        }
        .listItemLeft {
          display: flex;
          align-items: center;
          .musicTitle {
            max-width: 220px;
            margin-bottom: unset;
            margin-left: 10px;
            color: @textColor1;
          }
        }
      }
    }
    .right {
      display: flex;
      flex: 3;
      flex-direction: column;
      align-items: center;
      .lyricList {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        .lyricItem {
          margin-bottom: unset;
          padding-top: 10px;
          color: @textColor1;
        }
      }
    }
  }
}
